Display point awards for purchases on external ecommerce sites

Blank 28/10/2020 20:29 - 28/10/2020 20:29
Incentives Developers

In order to integrate the functionality of displaying the points that can be awarded when making a purchase, you will need to make use of Kademi’s rewards-lib library. This library contains the function kpoints() that allows these points to show on an external site. Before continuing please ensure that rewards-lib is installed in both the account and website you wish to work with.

 

Method

First, we will need to add a script tag for the plugin. The URL should point to your Kademi website, in this example “mykademisite.com” followed by the path to the plugin:

 

<script>https://mykademisite.com/theme/apps/rewards-lib/externalPointsPlugin.js</script>

 

Here is an example of a page where you want to show the points:

 

HTML:

 

<div class="">

    <div class='product-tile' data-sku='ABC-123'>

        <h4>Product 1</h4>

        Points: <span class='num-points'></span>

    </div>

    <div class='product-tile' data-sku='ABC-124'>

        <h4>Product 2</h4>

        Points: <span class='num-points'></span>

    </div>

</div>

 

Output: 

Product 1

Points:

Product 2

Points:





 

We will be using the series called 'ecom-series' that has a Point Allocation Source named 'points-for-a-claim', which will assign 100 points for every product sold. Note that this is just an example, it can be used with other rule types.

First we will need to add this library to the page:

    

Here is an example of a page where you want to show the points:

 

Product 1

Points:

Product 2

Points:

For this example, we will be using the series called 'ecom-series' that has a Point Allocation Source named 'points-for-a-claim', which will assign 100 points for every product sold:

When calling this function we will need the following parameters:

  • pointsUrl: A url to the function.
  • series: The name of the series which will capture the sales and award points.
  • pointsSelector: The css selector for the element where the points will be displayed.
  • participantsId: Id of the user.

 

Here is a sample call to the function for the previous page:

$(".product-tile").kpoints({
   pointsUrl : "http://mysite.com/points-calc",
   series : "ecom-sales",
   pointsSelector : ".num-points",
   participantId : "joe-bloggs"
});

The result should be something like this:

This resource does not include any downloadable files.